<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover" id="log-table">
					<thead>
						<tr>
<!--						    <th><input type="checkbox" id="checkAll">全选</th>-->
							<th>序号</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">

	$(function(){
		$("#pageId").load("doPageUI",doGetObjects);
		$(".input-group-btn").on("click",".btn-search",doQueryObjects);
	});
	function doQueryObjects(){
		$("#pageId").data("pageCurrent",1);
		doGetObjects();
	}
	function doGetObjects(){
		//1.params
		let pageCurrent=$("#pageId").data("pageCurrent");
		if(!pageCurrent)pageCurrent=1;
		let params={pageCurrent:pageCurrent};//暂时默认指定页码值为1
		let queryName=$("#searchNameId").val();//获取输入的用户名
		if(queryName)params.username=queryName;//username不能随意写
		//2.url
		let url='log/doFindPageObjects';
		//3.ajax request
		$.ajax({
			url:url,
			data:params,
			success(result){
				//处理查询到的响应结果
				doHandleQueryResponseResult(result);
			}
		})
	}
	//处理查询结果
	function doHandleQueryResponseResult(result){
		if(result.state==1){//1表示ok
			doSetTableBodyRows(result.data.records);//呈现日志记录
			doSetPagination(result.data);//初始化分页信息
		}else{
			doSetTableBodyErrors(result.message);
		}
	}
	//呈现服务端响应的错误信息
	function doSetTableBodyErrors(msg){
		//debugger
		let thColumns=$("#log-table>thead>tr>th").length;
		let tBody=$("#log-table>tbody");
		let msgRow=`<tr><td colspan=${thColumns}>${msg}</td></tr>`
		tBody.html(msgRow);
	}
	//在tbody中呈现当前页记录
	function doSetTableBodyRows(records){
		let tBody=$("#tbodyId");
		tBody.empty();
		records.forEach((item,i)=>tBody.append(doCreateRow(item,i)));//i表示下标
	}
	//渲染行
	function doCreateRow(item,i){
		return `<tr>
            <td>${i+1}</td>
            <td>${item.username}</td>
            <td>${item.operation}</td>
            <td>${item.method}</td>
            <td>${item.params}</td>
            <td>${item.ip}</td>
            <td>${item.time}</td>
           </tr>`
	}

   // //JS 问题如何解决? console.log(),debugger,排除法
   // $(function(){
	//    //在log_list.html页面的pageId位置，加载page.html,合二为一。
	//    $("#pageId").load("doPageUI",function(){//资源加载完成执行
	// 	   doGetObjects();//异步加载日志信息
	//    });
	//    //查询按钮事件注册
	//    $(".input-group-btn")
	//    .on("click",".btn-search",doQueryObjects)
	//    .on("click",".btn-delete",doDeleteObjects)
	//
	//    //thead中全选checkbox事件注册
	//    $("#checkAll").click(doChangeTBodyCheckBoxState);
	//    //tbody中checkbox对象事件注册
	//    $("#tbodyId").on("click",".cBox",doChangeTHeadCheckBoxState)
   // })
   // //基于tbody中checkbox对象的状态修改thread中checkbox对象状态
   // function doChangeTHeadCheckBoxState(){
	//    //1.获得tbody中所有checkbox对象进行逻辑与结果
	//    var flag=true;
	//    $("#tbodyId input[type='checkbox']")
	//    .each(function(){
	// 	   flag=flag&&$(this).prop("checked");
	//    });
	//    //2.修改thead中checkbox对象的状态值。
	//    $("#checkAll").prop("checked",flag)
   // }
   //
   // //基于thead中checkbox状态修改tbody中checkbox状态
   // function doChangeTBodyCheckBoxState(){
	//    //1.获取thead中checkbox对象状态
	//    var flag=$(this).prop("checked");
	//    //2.修改tbody中checkbox对象状态
	//    $("#tbodyId input[type='checkbox']").prop("checked",flag);
   // }
   // //获取选中的checkbox对象的id
   // function doGetCheckedIds(){
	//    //定义js数组
	//    var array=[];
	//    //获取所有tbody对象内部选中的checkbox对象的值，并将其放入数组
	//    $("#tbodyId input[type='checkbox']")
	//    //each函数表示迭代，这里用于迭代checkbox对象
	//    .each(function(){
	// 	    if($(this).prop("checked")){//判定checkbox是否已选中
	// 	    	//push用于向数组中放数据
	// 	    	array.push($(this).val())//val()获取value属性的值
	// 	    }
	//    });
	//    return array;
   // }
   // //删除动作实现
   // function doDeleteObjects(){
	//    //1.获取选中的checkbox对象value属性的值，并存储到数组。
	//    var idArray=doGetCheckedIds();
	//    debugger
	//    //2.校验数组内容
	//    if(idArray.length==0){
	// 	   alert("请先选择");
	// 	   return;
	//    }
	//    //3.给出提示，确定删除吗？
	//    if(!confirm("确定删除吗"))return;
	//    //4.执行异步删除操作
	//    //4.1定义删除的url
	//    var url="log/doDeleteObjects"
	//    //4.2定义删除参数
	//    var params={"ids":idArray.toString()};//[1,2,3]--toString--->1,2,3
	//    //4.3发送异步请求执行删除
	//    $.post(url,params,function(result){
	// 	   if(result.state==1){
	// 		   alert(result.message);
	// 		   //刷新当前页面
	// 		   doRefreshAfterDeleteOK();
	// 	   }else{
	// 		   doSetErrorMsg(result.message);
	// 	   }
	//    });
   // }
   // //设置删除错误信息
   // function doSetErrorMsg(msg){
	//    $("#tbodyId").html("<tr><td colspan='7'>"+msg+"</td></tr>");
   // }
   // //删除后的刷新操作
   // function doRefreshAfterDeleteOK(){
	//    //1.假如当前页码值不是最后一页,页码值不变。
	//    //2.修改当前页码值为上一页的页码值，但必须满足如下几个条件
	//    //1)当前页码值已经是最后一页
	//    //2)当前页码值大于>1
	//    //3)还有Thead中checkbox对象状态为全选状态
	//    var pageCurrent=$("#pageId").data("pageCurrent");
	//    var pageCount=$("#pageId").data("pageCount");
	//    var checkAllState=$("#checkAll").prop("checked");
	//    if(checkAllState&&pageCurrent==pageCount&&pageCurrent>1){
	// 	   pageCurrent--;
	// 	   $("#pageId").data("pageCurrent",pageCurrent);
	//    }
	//    //3.查询日志信息
	//    doGetObjects();
	//
   // }
   //
   // //基于条件查询日志记录
   // function doQueryObjects(){
	//    //1.初始化当前页码值为1，表示从第一页开始显示
	//    $("#pageId").data("pageCurrent",1);
	//    //2.执行查询操作
	//    doGetObjects();
   // }
   // //异步加载日志数据
   // function doGetObjects(){
	//    $("#checkAll").prop("checked",false);
	//    //1.定义请求参数
	//    //这个值最初是在page.html中进行了绑定
	//    var pageCurrent=$("#pageId").data("pageCurrent");//data(key)表示获取值
	//    if(!pageCurrent)pageCurrent=1;
	//    //var params="pageCurrent="+pageCurrent;//{"pageCurrent":1}
	//    var params={"pageCurrent":pageCurrent}
	//    //获取查询时参数username的值(可能有值，也可能没有值)
	//    var uname=$("#searchNameId").val();
	//    //假如uname有值，则将key:value添加到params对象中,这里的key需要与控制器方法参数相同
	//    if(uname)params.username=uname;
	//    //2.定义请求url
	//    var url="log/doFindPageObjects";
	//    //3.发送异步请求加载数据，并处理响应结果
	//    $.getJSON(url,params,function(result){//result-->JsonResult
	// 	   console.log(result);//json 格式的javascript对象
	// 	  // debugger
	//        doHandleResponseResult(result);//处理响应结果
	//    })
   // }
   // //处理服务端响应结果
   // function doHandleResponseResult(result){//jsonResult
	//    if(result.state==1){
	// 	   //1.将数据显示在table的tbody位置
	// 	   doSetTableBodyRows(result.data.records);//result.data-->pageObject
	// 	   //2.在pageId位置显示分页信息
	// 	   doSetPagination(result.data);//pageObject
	//    }else{
	// 	  // alert(result.message);//服务端的异常
	// 	   doSetErrorMsg(result.message);
	//    }
   // }
   // //将服务器端返回的日志信息呈现在table的tbody位置。
   // function doSetTableBodyRows(records){
	//    //1.获得tbody对象，并清空内容
	//    var tBody=$("#tbodyId");
	//    tBody.empty();//清空
	//    //2.迭代日志记录，将所有的记录追加到tbody中
	//    for(var i=0;i<records.length;i++){
	// 	   //2.1构建tr对象
	// 	   var tr=$("<tr></tr>");
	// 	   //2.2构建多个td对象
	// 	   var tds=doCreateTds(records[i]);
	// 	   //2.3将tds追加到tr
	// 	   tr.append(tds);
	// 	   //2.4将tr追加到tbody
	// 	   tBody.append(tr);
	//    }
   // }
   // function doCreateTds(row){
	//    var tds=
	//     "<td><input type='checkbox' class='cBox' value='"+row.id+"'></td>"+
	//     "<td>"+row.username+"</td>"+
	//     "<td>"+row.operation+"</td>"+
	//     "<td>"+row.method+"</td>"+
	//     "<td>"+row.params+"</td>"+
	//     "<td>"+row.ip+"</td>"+
	//     "<td>"+row.time+"</td>";
	//     return tds;
   // }
</script>






